<div>
  <link rel="stylesheet" href="https://lib.baomitu.com/element-plus/2.2.0/index.min.css">
</div>
<div id="roamingApp">
  <div class="v_scroller i_page_content min_h_100 settings_content page_scroller pt_lg">
    <div class="i_wrapper pb_x40 p_relative min_h_100">
      <div class="settings_content--item login-item">
        <div class="flex_start items_stretch">
          漫游设置页面
        </div>
      </div>
      <div class="settings_content--item upos-item">
        <h4 class="b_text mt_0">Access Token管理</h4>
        <div class="mt_md">
          <p class="b_text text2"><strong>AccessToken用于获取外区番剧的播放链接。</strong></p>
          <div>
            <el-button v-if="tokenInfo.expired" @click="startHDLogin">HD登录</el-button>
            <el-popconfirm
                    v-else
                    title="你确定要删除吗？"
                    @confirm="deleteHDLogin"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <span>&nbsp;&nbsp;{{ tokenInfo.msg }}</span>
            <div v-if="hdLogin.qrCode">
              <img :src="`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${hdLogin.qrCode}`">
            </div>
          </div>
        </div>
      </div>
      <div class="settings_content--item upos-item">
        <h4 class="b_text mt_0">upos服务器设置</h4>
        <div class="mt_md">
          <p class="b_text text2"><strong>替换upos视频服务器：</strong></p>
          <el-select v-model="uposKey" class="m-2" placeholder="Select" @change="changeUPOS">
            <el-option
              v-for="item in uposList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <br>
          <el-checkbox v-model="replaceAkamai" @change="changeReplaceAkamai">替换Akamai</el-checkbox>
          <!---->
          <br>
          PAC代理(例如：https://bili.api.jysafe.cn/pac.php?proxy=127.0.0.1:7890)：
          <el-input v-model="pacLink" @change="changePACLink"></el-input>
        </div>
      </div>
      <div class="settings_content--item server-item">
        <h4 class="b_text mt_0">自定义服务器设置</h4>
        <br>
        <div class="server-list">
          <el-form ref="serverFormRef" :rules="serverRule" :model="serverList">
            <el-form-item
              label="首选"
              prop="default"
            >
              <el-input
                v-model="serverList.default"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="大陆"
              prop="mainLand"
              :rules="serverRule.mainLand"
            >
              <el-input
                v-model="serverList.mainLand"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="香港"
              prop="hk"
            >
              <el-input
                v-model="serverList.hk"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="台湾"
              prop="tw"
            >
              <el-input
                v-model="serverList.tw"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="泰国/东南亚"
              prop="th"
            >
              <el-input
                v-model="serverList.th"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveServer($refs.serverFormRef)"
                >保存</el-button
              >
              <el-button @click="resetForm($refs.serverFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="settings_content--item about-item">
        <h4 class="b_text mt_0">关于哔哩漫游</h4>

      </div>
      <!---->
      <!-- <p class="b_text text3 fs_5 p_center_x b_sm">构建号：10010010012205131859</p> -->
    </div>
  </div>
</div>